<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!-- 2-1.导入css -->
    
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <style type="text/css">
    th{display: none;}
    tbody tr ,tbody tr td{display:block;width:500px!important;float: left;overflow: hidden;padding:0px;}
    tbody tr td div{display:block;width:400px!important;float: left;overflow: hidden;padding:0px;}
    .layui-table-grid-down{display: none;}
    .layui-table-cell{
    	display:block;
    	height:300px;
    	line-height: 300px;
	}
    </style>
</head>
<body>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<script type="text/html" id="editordelete">
    	<div style="width: 300px;height: 300px;background-color: salmon;float: left;position: absolute;">
			<p>{{d.newid}}</p>
		</div>
    </script>
    
</body>

<!-- 2-2.导入js -->

<script src="../layuiadmin/layui/layui.js"></script>  
<script>
  
  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块，模块刺客
  }).use(['index', 'form','table', 'laydate'], function(){
    var table = layui.table
    ,form = layui.form
    ,$ = layui.$
    ,admin = layui.admin;
    table.render({
		id:'newid',
	    elem: '#test'
	    ,url:'/news/queryNewsByNewtype?newtype=2'
	    ,cellMinWidth: 160
	    ,skin:'nob'
	    ,cols: [[
	      {field:'', title: '', align:'center', templet: '#editordelete', unresize: true}
	    ]]
	//My笔记： unresize: true，表示这一列不允许再用鼠标自定义它的宽度，不设置默认是可以的，即 unresize: false
	//     sort: true,表示会在这一列的表头上加上一个排序的箭头，加上这句就是支持基于这一列进行关于行数据的排序
	//     templet: '#usernameTpl'，表示这一行的效果关联一个id名为usernameTpl的script块，在这里可以定义一些花里胡哨的显示，如表单显示
	  });
  });
  </script>
</html>